<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="./userTemplate/UserTemplate2.xhtml">
        <ui:define name="Title">
            <title>Home</title>
        </ui:define>
        <ui:define name="content">
            <h:form>
                <div id="content">
                    <div id="search" align="right">
                        <h:panelGrid columns="3">
                            <h:inputText id="keyword" value="#{carBean.valueSearch}"  label="Keyword" style="height: 27px; width: 200px"/>
                            <p:watermark for="keyword" value="Search with a keyword"/>
                            <p:commandButton action="#{carBean.searchCar}" value="Search" ajax="false"/>
                        </h:panelGrid>
                    </div>
                    <p:dataGrid  var="car" value="#{carBean.listvehicle}" columns="2" rows="4" paginator="true" paginatorTemplate="
                                {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                rowsPerPageTemplate="6,8,10,12" >
                        <p:column>
                            <p:panel header="#{car.vehilceName}" style="text-align:cente ; width: 310px;margin: 10px">

                                <h:panelGrid columns="1" style="width: 150px; height: 100px">
                                    <h:commandLink action="#{carBean.showDetailVehicle(car)}">
                                        <p:graphicImage value="/ImgCar/#{car.image}" style="width: 280px; height: 160px" />
                                    </h:commandLink>
                                    <br/>
                                    <h:outputText style="margin: 20px" value="Price : #{car.price} USD"/>
                                </h:panelGrid>
                            </p:panel>
                        </p:column>
                    </p:dataGrid>
                </div>

                <!-- <h:dataTable value="{carBean.listvehicle}" var="car">
                     <h:column>
                         <f:facet name="header">
                             <h:outputText value="Vehicle Name"/>
                         </f:facet>
                         <h:outputText value="{car.vehilceName}"/>
                     </h:column>
                 </h:dataTable>
                -->
            </h:form>
        </ui:define>
    </ui:composition>
</html>
